window.onload = function () {
    /**
     * Tabs 标签页
     */
    (function () {
        /**
         * 标签页实现
         * @param {*} tabRoot 
         */
        function onTabs(tabRoot) {
            let tabs = document.querySelector(tabRoot).firstElementChild; // 选项根容器
            let liArray = tabs.getElementsByTagName('li'); // 所有选项标签
            let olliArray = tabs.nextElementSibling.getElementsByTagName('li'); // 所有容器选项

            // 直接操作每个选项事件
            for (let index = 0; index < liArray.length; index++) {
                const element = liArray[index];
                element.addEventListener('click', function () {
                    //移除所有选项指定样式
                    for (let index = 0; index < liArray.length; index++) {
                        liArray[index].classList.remove('y-active'); //选项标签样式
                        olliArray[index].classList.remove('y-on'); //容器样式
                    }
                    //添加选中样式
                    this.classList.add('y-active');
                    olliArray[index].classList.add('y-on');
                })
            }
        }

        onTabs('#userManager');
        //onTabs('#modelManger');
    })()

}